<template>
  <div class="container">
    <el-card shadow="never">
      <div>活动名称：{{ resData.title }}</div>
      <div>创建人：{{ resData.created_name }}</div>
      <div>状态：<span :style="{ color: StatusColor(resData.activity_status_name) }">{{ resData.activity_status_name
      }}</span>
      </div>
      <div>创建时间：{{ resData.created_at }}</div>
      <div>创建有效期：{{ resData.effective_time }}</div>
      <div v-if="resData.activity_end_time">提前结束时间：{{ resData.activity_end_time }}</div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { StatusColor } from "@/utils/smartMarketing";
import { getSignBaseInfo } from "@/api/smartMarketing/signIn";
import { useRoute } from "vue-router";
import { onMounted, ref } from "vue";
const route = useRoute();
const resData = ref<any>({});
onMounted(() => {
  getSignBaseInfo({ activity_id: route.query.id }).then((res: any) => {
    resData.value = res;
  });
});
</script>

<style scoped lang="scss">
.container {
  margin-bottom: 16px;

  :deep(.el-card) {
    .el-card__body {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
      font-size: 14px;
      color: #33302d;
    }
  }
}
</style>
